{% extends 'layouts/base.html' %}

{% block title %} {{ title }}{{ block.super }}{% endblock title %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    <h2 class="text-center mb-4">{{ title }}</h2>
                    
                    {% if form.errors %}
                        {% for field in form %}
                            {% for error in field.errors %}
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    {{ error|escape }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            {% endfor %}
                        {% endfor %}
                        {% for error in form.non_field_errors %}
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ error|escape }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% endfor %}
                    {% endif %}

                    <form method="POST" action="" class="needs-validation" novalidate>
                        {% csrf_token %}
                        {% for field in form %}
                            <div class="mb-3">
                                <label for="id_{{ field.name }}" class="form-label">{{ field.label }}</label>
                                <div class="input-group">
                                    {% if field.name == 'username' %}
                                        <span class="input-group-text">
                                            <i class="fas fa-user"></i>
                                        </span>
                                    {% elif field.name == 'password' %}
                                        <span class="input-group-text">
                                            <i class="fas fa-lock"></i>
                                        </span>
                                    {% endif %}
                                    <input type="{{ field.field.widget.input_type }}"
                                           class="form-control"
                                           name="{{ field.name }}"
                                           id="id_{{ field.name }}"
                                           placeholder="{{ field.field.widget.attrs.placeholder }}"
                                           required>
                                </div>
                            </div>
                        {% endfor %}

                        <div class="d-grid gap-2">
                            <button class="btn btn-primary btn-lg" type="submit">
                                {{ title }}
                            </button>
                        </div>

                        <div class="text-center mt-4">
                            {% if request.path == "/login" %}
                                <p class="mb-0">Don't have an account? 
                                    <a href="{% url 'accounts:register' %}" class="text-primary fw-bold">Register Here</a>
                                </p>
                            {% else %}
                                <p class="mb-0">Already have an account? 
                                    <a href="{% url 'accounts:login' %}" class="text-primary fw-bold">Login Here</a>
                                </p>
                            {% endif %}
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_css %}
<style>
    .card {
        border-radius: 1rem;
        border: none;
    }
    
    .btn-primary {
        padding: 0.8rem;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .input-group-text {
        background-color: transparent;
        border-right: none;
    }
    
    .form-control {
        border-left: none;
    }
    
    .form-control:focus {
        box-shadow: none;
        border-color: #ced4da;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
    // Form validation
    (function () {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
    })()
</script>
{% endblock %}
